
import { Box, Stack, Grid } from '@mui/material';
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';
import { useLocation } from 'react-router-dom'

function Photo () {

  const location = useLocation()
  const list = location.state.source.list

  return (
  <PhotoProvider>
    <Grid container spacing={0} justifyContent='center' alignItems="center" sx={{ width: '100%',height: '100%',background:'#000' }}>
      <Box sx={{height:'100vh',overflowY:'auto',padding:'10px'}}>
        <Stack spacing={{ xs: 1, sm: 2 }} direction="row" useFlexGap flexWrap="wrap">
          {
            list.map(i => <PhotoView  key={i.path} src={i.path}>
                <img  style={{width:'19%',borderRadius:'10px'}} src={i.path} alt="" />
            </PhotoView>)
          }
        </Stack>
      </Box>
      </Grid>
  </PhotoProvider>
  )
}



export default Photo